// src/SearchBar.tsx
import { useState, useEffect, FC } from "react";

interface Props {
  value: string;
  onChange: (kw: string) => void;
}

const SearchBar: FC<Props> = ({ value, onChange }) => {
  const [input, setInput] = useState(value);

  /**
   * 当外部value改变时，同步更新内部input状态
   * 当 value 属性发生变化时（例如，当 FilterSortBar 中调用 setKeyword("") 时），
   * 它会同步更新 SearchBar 组件的内部 input 状态。这样就能确保搜索框的值在重置时正确更新。
   */
  useEffect(() => {
    setInput(value);
  }, [value]);

  /* 500 ms 防抖 */
  useEffect(() => {
    // 只有当输入值与外部值不一致时才触发搜索
    if (input !== value) {
      const timer = setTimeout(() => onChange(input), 500);
      return () => clearTimeout(timer);
    }
  }, [input, onChange, value]);

  return (
    <input
      type="text"
      placeholder="搜索名称..."
      value={input}
      onChange={(e) => setInput(e.target.value)}
      style={{ width: 200, marginRight: 16 }}
    />
  );
};

export default SearchBar;
